<template>
  <div
    class="tree"
    v-for="(item, index) in data"
    :key="index"
    @click.stop="clickTap($event, item)"
  >
    <input v-model="item.checked" type="checkbox" />
    <span>{{ item.name }}</span>

    <!-- 组件自身 -->
    <!-- <Tree v-if="item.children?.length" :data="item?.children"></Tree> -->

    <!-- 组件自身别名 -->
    <WYN v-if="item.children?.length" :data="item?.children"></WYN>
  </div>
</template>

<script lang="ts">
export default {
  name: "WYN",
};
</script>

<script setup lang="ts">
interface ITree {
  name: string;
  checked: boolean;
  children?: ITree[];
}

withDefaults(defineProps<{ data?: ITree[] }>(), {
  data: () => [],
});

const clickTap = (e: Event, item: ITree) => {
  console.log(e.target, item);
};
</script>

<style scoped lang="scss">
.tree {
  margin-left: 15px;
}
</style>
